<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<view class="content">
					<view class="item">
						<text>病人：“医生，我最近睡不着，吃不下，心情很差，我是不是得了抑郁症啊？”</text>
						<text>医生仔细检查后：“你不是抑郁症，是缺钱症，这病我也治不了，得去赚钱门诊看看。”</text>
					</view>
					<pure-gap size="20px"></pure-gap>
					<view class="item">
						<text>问：“为什么数学书总是很忧郁？”</text>
						<text>答：“因为它有太多的问题了。”</text>
					</view>
				</view>
			</pj-demo>

			<!-- 行内间隔 -->
			<pj-demo title="行内间隔">
				<view class="content">
					为天地立心，为生民立命，
					<pure-gap
						size="20px"
						inline
					></pure-gap>
					为往圣继绝学，为万世开太平
				</view>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
</script>

<style lang="scss" scoped>
	.page {
		--pure-gap-bakground: var(--pure-background-deep);

		.content {
			font-size: var(--pure-font-size-small);
			background: var(--pure-background-default);
			padding: 12px 16px;
			text-align: justify;
			border-radius: var(--pure-radius-default);
			line-height: 1.7;
		}

		.item {
			display: flex;
			flex-direction: column;
		}
	}
</style>
